<template>
  <div class="mod-study__event">
    <title-bar title="活动信息" />
    <div class="info-table">
      <div class="info-table-item">
        <div class="info-table-item-label">研学活动名称</div>
        <div class="info-table-item-value">{{ info.eventInfo.name }}</div>
      </div>
      <!-- <div class="info-table-item">
        <div class="info-table-item-label">账号名</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderUsername }}</div>
      </div> -->
      <div class="info-table-item">
        <div class="info-table-item-label">带队人姓名</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderName }}</div>
      </div>
      <div class="info-table-item">
        <div class="info-table-item-label">带队人联系电话</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderTel }}</div>
      </div>
      <!-- <div class="info-table-item">
        <div class="info-table-item-label">带队人身份信息</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderIdCard }}</div>
      </div> -->
    </div>
    <title-bar title="入营人员" style="margin-top: 30px;" />
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-popconfirm width="220" icon-color="#626AEF" title="确定入营?" @confirm="inCampHandle">
          <template #reference>
            <el-button type="primary" :disabled="!state.dataListSelections?.length">入营</el-button>
          </template>
          <template #actions="{ confirm, cancel }">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button type="danger" size="small" @click="confirm">
              确认
            </el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
      <el-form-item>
        <el-popconfirm width="220" icon-color="#626AEF" title="确定退费?" @confirm="refundHandle">
          <template #reference>
            <el-button type="danger" :disabled="!state.dataListSelections?.length">退费</el-button>
          </template>
          <template #actions="{ confirm, cancel }">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button type="danger" size="small" @click="confirm">
              确认
            </el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList"
      @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" row-key="id"
      border style="width: 100%">
      <el-table-column type="selection" :selectable="selectable" label="选择" header-align="center" align="center"
        width="80"></el-table-column>
      <el-table-column prop="name" label="入营人员" header-align="center"></el-table-column>
      <el-table-column prop="idCard" label="身份信息" header-align="center"></el-table-column>
      <el-table-column prop="validStatus" label="核验状态" header-align="center">
        <template v-slot="scope">
          <div :class="[scope.row.validStatus === 'NOT' ? 'status-nocheck' : 'status-check']">{{
          scope.row.verifyStatus }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer-btn" style="position: fixed; right:40px;
    bottom: 40px;">
      <el-button @click="back()">返回</el-button>
      <el-popconfirm width="220" icon-color="#626AEF" title="确定完成核验？" @confirm="finishCheck" v-if="verifyStatus === '待核验'">
        <template #reference>
          <el-button type="primary" v-if="info.status !== 'END'">完成核验</el-button>
        </template>
        <template #actions="{ confirm, cancel }">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button type="danger" size="small" @click="confirm">
            确认
          </el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import useView from "@/hooks/useView";
import { studyTypeList, studyStatusList } from "@/constants/config";
import TitleBar from "@/components/base/title-bar/index";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const eventId = route.query.eventId;
const verifyStatus = route.query.verifyStatus;
const info = ref<any>();

const view = reactive({
  getDataListURL: "/study/student/event/person/page",
  getDataListIsPage: true,
  dataForm: {
    eventId,
  },
});

const state = reactive({ ...useView(view), ...toRefs(view) });
const selectable = (row: any) => row.validStatus === 'NOT';

// 获取活动详情
const getInfo = () => {
  baseService.get('/study/student/event/info', { eventId }).then((res) => {
    info.value = res.data;
  });
};
getInfo();

const inCampHandle = () => {
  baseService.post('/study/student/event/inCamp', { eventId, studentIds: state.dataListSelections?.map((d) => d.studentId) }).then((res) => {
    ElMessage.success({
      message: "核验成功",
      duration: 500,
      onClose: () => {
        state.getDataList();
      }
    });
  });
};

const refundHandle = () => {
  baseService.post('/study/student/event/refund', { eventId, studentIds: state.dataListSelections?.map((d) => d.studentId) }).then((res) => {
    ElMessage.success({
      message: "退费成功",
      duration: 500,
      onClose: () => {
        state.getDataList();
      }
    });
  });
};

const finishCheck = () => {
  baseService.post('/study/student/event/end', { eventId }).then((res) => {
    ElMessage.success({
      message: "活动核验完成",
      duration: 500,
      onClose: () => {
        back();
      }
    });
  });
};

const back = () => {
  router.go(-1);
};
</script>
